body,figure,figcaption,h2,p,img{
	margin:0;
	padding: 0;
}
{
	position: relative;
	width: 33.33%;
	height: 350px;
	overflow: hidden;
	float: left;

}
figure img{
	opacity: 0.8;
	transition: all 0.35s;
}
figcaption{
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	font-family: "微软雅黑";
}

figure figcaption p,h2,span,div{
	transition: all 0.35s;
}
@media screen and (max-width:600px){
	figure{
		width: 100%;
		position: relative;
		height: 350px;
		overflow: hidden;
		float: left;
	}

}
@media screen and (min-width:601px) and (max-width:1000px){
	figure{
		width: 50%;
		position: relative;
		height: 350px;
		overflow: hidden;
		float: left;
	}

}
@media screen and (min-width:1001px){
	figure{
		width: 33.33%;
		position: relative;
		height: 350px;
		overflow: hidden;
		float: left;
	}
}




.test1{
	background: #2f0000;
}
.test1 figcaption{
	padding: 20px;
}
.test1 figcaption p{
	background: #fff;
	color: #333;
	margin:5px;
	text-align: center;
	transform: translate(-120px,0px);

}
.test1 figcaption p:nth-of-type(1){/*第一个P标签*/
	transition-delay: 0.05s;

}
.test1 figcaption p:nth-of-type(2){/*第二个P标签*/
	transition-delay: 0.1s;

}
.test1 figcaption p:nth-of-type(3){/*第三个P标签*/
	transition-delay: 0.15s;

}
.test1:hover figcaption p{
	transform: translate(0px,0px);
}
.test1:hover img{
	transform: translate(-50px,0px);
	opacity: 0.5;
}




.test2{
	background: #030;
}

.test2 figcaption {
	height: 100%;
	width: 100%;

}
.test2 figcaption h2{
	margin-top: 15%;
	margin-left: 15%;
}
.test2 figcaption p{

	margin-left: 15%;
	transform: translate(0px,50px);
	opacity: 0;

}
.test2 figcaption div{
	border: 2px solid #fff;
	height: 80%;
	width: 80%;
	position: absolute;
	top: 10%;
	left: 10%;
	transform: translate(0px,-350px) rotate(0deg);

}
.test2:hover figcaption div{
	
	transform: translate(0px,0px) rotate(360deg);

}
.test2:hover img{
	opacity: 0.5;
}
.test2:hover figcaption p{
	transform: translate(0px,0px);
	opacity: 1;

}








.test3{
	background: #000;
}
.test3 figcaption{
	top: 30%;
	left: 15%;
}
.test3 figcaption h2{
	transform: skew(90deg);

}
.test3 figcaption p{
	transform: skew(90deg);
	transition-delay: 0.1s;

}
.test3:hover img{
	opacity: 0.5;
}
.test3:hover figcaption h2{
	transform: skew(0deg);

}
.test3:hover figcaption p{
	transform: skew(0deg);

}





.test4{
	background: #000;
}
.test4 figcaption {
	height: 100%;
	width: 100%;

}
.test4 figcaption h2{
	margin-top: 15%;
	margin-left: 15%;
	transform: scale(1.2,1.2);
	opacity: 0;

}
.test4 figcaption p{
	margin-top: 5px;
	margin-left: 15%;
	transform: scale(1.2,1.2);
	opacity: 0;

}
.test4 figcaption div{
	border: 2px solid #fff;
	height: 80%;
	width: 80%;
	position: absolute;
	top: 10%;
	left: 10%;
	transform: scale(1.2,1.2);
	opacity: 0;

}
.test4:hover figcaption div{
	
	transform: scale(1,1);
	opacity: 1;

}
.test4:hover img{
	opacity: 0.5;
	transform: scale(1.2,1.2);

}
.test4:hover figcaption h2{
	transform: scale(1,1);
	opacity: 1;

}
.test4:hover figcaption p{
	transform: scale(1,1);
	opacity: 1;

}




.test5{ background:#000;}
.test5 figcaption{ width:100%; height:100%;}
.test5 figcaption div{ background: #fff; width:130%; height:100%; position:absolute; transform:translate(0,350px) rotate(0deg); transform-origin:0 0; opacity:0.5;}
.test5:hover figcaption div{transform:translate(0,350px) rotate(-15deg); opacity:0.9;}
.test5:hover img{opacity:0.5;transform:translate(0,-10px);}
.test5 figcaption h2{margin:15% 0 0 10%; transform:translate(0,50px); opacity:0; position:absolute;}
.test5 figcaption p{ margin:60% 0 0 80%; transform:translate(0,50px); opacity:0; color:#000; position:absolute; z-index:9999;}
.test5:hover figcaption h2{ transform:translate(0,0); opacity:1; transition-delay:0.2s;}
.test5:hover figcaption p{ transform:translate(0,0); opacity:1; transition-delay:0.3s;}
 
.test6{background:#000;}
.test6 figcaption{ width:100%; height:100%;}
.test6 figcaption div.line1{ border-left:1px solid #fff;  border-right:1px solid #fff; width:80%; height:90%; left:10%; top:5%; position:absolute; transform:scale(1,0); opacity:0;}
.test6 figcaption div.line2{ border-top:1px solid #fff;  border-bottom:1px solid #fff; width:90%; height:80%; left:5%; top:10%; position:absolute; transform:scale(0,1); opacity:0;}
.test6:hover figcaption div.line1{transform:scale(1,1); opacity:1;}
.test6:hover figcaption div.line2{transform:scale(1,1); opacity:1;}
.test6 figcaption h2{ margin:15% 0 0 15%; transform:scale(0.8,0.8); opacity:0;}
.test6 figcaption p{ margin:2% 0 0 15%; transform:scale(0.8,0.8); opacity:0;}
.test6:hover figcaption h2{transform:scale(1,1); opacity:1;transition-delay:0.2s;}
.test6:hover figcaption p{ transform:scale(1,1); opacity:1; transition-delay:0.3s;}
.test6 img{ transform:scale(1.1,1.1); opacity:1;}
.test6:hover img{ transform:scale(1,1); opacity:0.5;}